<!DOCTYPE html>
<html>
    <head>
        <title>Page title in index.html</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="color-scheme" content="light dark">
        <style>
            textarea {
                width: 100%;
                box-sizing: border-box;
                min-height: 100px;
            }
        </style>
    </head>
    <body>
        <h1>It works!</h1>

        <button onclick="testDownload()">Test file download</button>
        <button onclick="testCamera()">Test camera</button>
        <button onclick="testMicrophone()">Test microphone</button>
        <button onclick="window.close()">window.close()</button>
        <button onclick="testLocalFetchFromMain()">Test local fetch from main</button>
        <button onclick="testLocalFetchFromBlobWorker()">Test local fetch from blob: worker</button>
        <button onclick="testTextInput()">Test text input</button>

        <script>
            const testDownload = async () => {
                const blob = new Blob([
                    new Uint8Array("Hello, world!".split("").map(i => i.charCodeAt(0)))
                ], {
                    type: "text/plain"
                });
                ExternalDownloadHelper.download("test.txt", blob);
            };

            const testCamera = async () => {
                const stream = await navigator.mediaDevices.getUserMedia({
                    video: true
                });
                const video = document.createElement("video");
                video.srcObject = stream;
                video.autoplay = true;
                video.controls = true;
                document.body.appendChild(video);
            };

            const testMicrophone = async () => {
                const stream = await navigator.mediaDevices.getUserMedia({
                    audio: true
                });
                const audio = document.createElement("audio");
                audio.srcObject = stream;
                audio.autoplay = true;
                audio.controls = true;
                document.body.appendChild(audio);
            };

            let testFetchURL = new URL('', location.href).href;

            const testLocalFetchFromMain = async () => {
                fetch(testFetchURL)
                    .then(res => res.text())
                    .catch(err => {
                        return `${err}`;
                    })
                    .then(text => {
                        const el = document.createElement("pre");
                        el.textContent = text;
                        document.body.appendChild(el);
                    });
            };

            const testLocalFetchFromBlobWorker = async () => {
                const source = `
                console.log("Inside worker...");
                fetch(${JSON.stringify(testFetchURL)})
                    .then(res => res.text())
                    .then(text => postMessage(text))
                    .catch(err => postMessage('' + err));
                `;
                const blob = new Blob([source], {
                    type: 'application/javascript'
                });
                const url = URL.createObjectURL(blob);
                const worker = new Worker(url);
                worker.addEventListener('message', (e) => {
                    const el = document.createElement("pre");
                    el.textContent = e.data;
                    document.body.appendChild(el);
                });
            };

            const testTextInput = () => {
                const textarea = document.createElement("textarea");
                textarea.placeholder = "Type here...";
                document.body.appendChild(textarea);
                document.addEventListener("keydown", (e) => {
                    if (e.target !== textarea) {
                        textarea.value = `keydown ${e.key}\n${textarea.value}`;
                    }
                });
                document.addEventListener("keyup", (e) => {
                    if (e.target !== textarea) {
                        textarea.value = `keyup ${e.key}\n${textarea.value}`;
                    }
                });
            };
        </script>
    </body>
</html>
